<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>vue计算属性，方法，监听器</title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app">{{fullName}} {{age}}   -->计算属性(推荐)</div>
	
	<div id="app2">{{fullName()}} {{age}}  -->方法</div>
	
	<div id="app3">{{fullName}} {{age}}  -->监听器</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			firstName: "Dell",
			lastName: "Lee",
			age: 28
		},
		//计算属性
		computed: {
			fullName: function () {
				console.log("计算+1");
				return this.firstName +" "+ this.lastName
			}
		}
		
	})
	
	var app2 = new Vue({
		el: '#app2',
		data: {
			firstName: "Dell",
			lastName: "Lee",
			age: 28
		},
		//利用方法  
		methods: {
			fullName: function(){ 
				console.log("计算+1");
				return this.firstName +" "+ this.lastName
			}
		}
	})
	
	var app3= new Vue({
		el: '#app3',
		data: {
			firstName: "Dell",
			lastName: "Lee",
			fullName: "Dell Lee",
			age: 28
		},
		//利用监听器 
		watch: {
			firstName: function(){ 
				console.log("firstName计算+1");
				this.fullName = this.firstName +" "+ this.lastName
			},
			lastName: function(){ 
				console.log("lastName计算+1");
				this.fullName =  this.firstName +" "+ this.lastName
			}
		}
	})
</script>

</html>
